<template>
  
    
    <div  align="left"><el-image style="width: 100%; height: 40%" :src="logo" fit="fit" /></div>

  
  
</template>
<script>
// import * as echarts from "echarts";
import "echarts/lib/chart/bar";
import "echarts/lib/chart/line";

import "echarts/lib/chart/pie";
import "echarts/lib/component/legend";
import "echarts/lib/component/title";
import "echarts/lib/component/grid";
import VolHeader from "@/components/basic/VolHeader.vue";
import VolForm from "@/components/basic/VolForm.vue";

let echarts = require("echarts/lib/echarts");
import { useRouter, useRoute } from "vue-router"; //huangxs==2021年12月14日 15:33:24

import { chart1, line } from "./home/home-chart-options_new";
import { ref, onMounted, onUnmounted } from "vue";

import http from "../api/http.js";
import { interval } from "@/uitils/Utils.js";
var imgUrl = require('@/assets/imgs/111.png');
var $chart2;
export default {
  components: { VolForm, VolHeader },
  data() {
    return {
      logo : ref(imgUrl),
      center: [
        {
          title: "人员管理",
          icon: "el-icon-set-up",
          url: "/Sys_User",
        },
        {
          title: "角色管理",
          icon: "el-icon-turn-off",
          url: "/Sys_Role",
        },
        {
          title: "部门管理",
          icon: "el-icon-reading",
          url: "/fk_depar",
        },

        {
          title: "菜单管理",
          icon: "el-icon-document",
          url: "/sysmenu",
        },

        {
          title: "数据字典",
          icon: "el-icon-chat-line-round",
          url: "/Sys_Dictionary",
        },
        {
          title: "费用报销",
          icon: "el-icon-chat-dot-round",
          url: "/fk_reim",
        },
      ],
      n: 90,
      value1: "1",
      dichuli: [],
      list: [{ desc: "立讯PDB系统上线测试" }],
      tableData: [],
      cntr_region: [], //接受初始话数据
      racct_region: [], //接受初始话数据
      year_region:[], //接受初始话数据
      form: {
        //用于提交到后端的数据结构
        year:"",
        racct: "",
        cntr: "",
      },
    };
  },
  setup() {
    let router = useRouter(); //huangxs==2021年12月14日 15:33:24
    let open = (item) => {
      //window.open(item.url, "_blank");//弹出独立的网页
      //router.push({ path: item.url, hash: "dd" });
      router.push({ path: item.url, hash: "" });
    };

    onMounted(() => {
      /* $chart2 = echarts.init(document.getElementById("h-chart2"));
      //console.log($chart2);
      $chart2.setOption(line);
	  console.log(line.series[0].data) */
    });
    onUnmounted(() => {
      //$chart2.dispose();
    });
    return { open };
  },
  mounted() {
    //$nextTick(() => {
    //var turl = "/api/Fk_reim/get_dclcount_new?";
    /* http.post(turl, {}, true).then((s) => {//获取待处理业务
      //console.log(s);
      this.dichuli.splice(0, this.dichuli.length);
      this.dichuli.push(...s);
      //console.log(this.dichuli);
    }); */
    //})
 /*    http
      .post("/api/Fk_yusuan/get_yusuan_home?ls_typeid=1", {}, true)
      .then((s) => {
        //console.log(s)
        //ls_typeid=1没有意义
         $chart2 = echarts.init(document.getElementById("ys_chart"));

        line.series[0].data.splice(0, line.series[0].data.length); //清空预算
        line.series[0].data.push(...s.sum_yuan); //不需要循环插入数据 

        line.series[1].data.splice(0, line.series[1].data.length); //清空实际发生额
        line.series[1].data.push(...s.sum_sj); //不需要循环插入数据 

        line.title.text="预算：￥"+interval(this.sum_all(s.sum_yuan))+"  实际："+interval(this.sum_all(s.sum_sj));
        //console.log(s);
        $chart2.setOption(line);//初始化图表2数据
        this.set_tableData(s);//初始化el_table数据
        this.init_select(s);//初始化查询下来列表
      });

    */
  }, 
  destroyed() {},
  methods: {
    ti_search() {
      var pdat=encodeURIComponent(JSON.stringify(this.form));//form是对象，传到服务器端解密后可以直接访问属性，不需要循环
      //console.log(JSON.stringify(this.form));
      http
        .post("/api/Fk_yusuan/select_yusuan_home?pdata="+pdat, {}, true)
        .then((s) => {
        line.series[0].data.splice(0, line.series[0].data.length); //清空
        line.series[1].data.splice(0, line.series[1].data.length);
        line.series[0].data.push(...s.sum_yuan); //不需要循环插入数据
        line.series[1].data.push(...s.sum_sj); //不需要循环插入数据
        //console.log(s);
        line.title.text="预算：￥"+interval(this.sum_all(s.sum_yuan))+"  实际："+interval(this.sum_all(s.sum_sj));
        $chart2.setOption(line);
         this.set_tableData(s);
        }); 
    },
    init_select(s) {
      this.year_region = s.array_year;
      //console.log(s.array_year);
      var date = new Date();
      this.form.year =date.getFullYear();
      //this.year_region.splice(0, 0, { value: date.getFullYear(), label: date.getFullYear()+"年度" });//插入到第0位

      this.cntr_region = s.array_cntr;
      this.cntr_region.splice(0, 0, { value: "all", label: "【全部】" });//插入到第0位
      this.form.cntr = "all";
      //this.cntr_region.push({value:"all",label:"【所有】"})

      this.racct_region = s.array_typelist;
      this.racct_region.splice(0, 0, { value: "all", label: "【全部】" });//插入到第0位
      this.form.racct = "all";
    },
    sum_all(s){
      var rnt_sum=0.00;
        for(var i=0;i<=s.length-1;i++){
            rnt_sum=rnt_sum+s[i];
        }
        return rnt_sum.toFixed(2);
    },
    set_tableData(s) {
      this.tableData.splice(0, this.tableData.length);
      this.tableData.push({
        type01: "预算（元）",
        tsl01: s.sum_yuan[0],
        tsl02: s.sum_yuan[1],
        tsl03: s.sum_yuan[2],
        tsl04: s.sum_yuan[3],
        tsl05: s.sum_yuan[4],
        tsl06: s.sum_yuan[5],
        tsl07: s.sum_yuan[6],
        tsl08: s.sum_yuan[7],
        tsl09: s.sum_yuan[8],
        tsl10: s.sum_yuan[9],
        tsl11: s.sum_yuan[10],
        tsl12: s.sum_yuan[11],
      });
      this.tableData.push({
        type01: "实际发生额（元）",
        tsl01: s.sum_sj[0],
        tsl02: s.sum_sj[1],
        tsl03: s.sum_sj[2],
        tsl04: s.sum_sj[3],
        tsl05: s.sum_sj[4],
        tsl06: s.sum_sj[5],
        tsl07: s.sum_sj[6],
        tsl08: s.sum_sj[7],
        tsl09: s.sum_sj[8],
        tsl10: s.sum_sj[9],
        tsl11: s.sum_sj[10],
        tsl12: s.sum_sj[11],
      });
    },
  },
};
//var $chart, $chart2, $chart3
// window.addEventListener("resize", function () {
//   $chart2.setOption(chart2);
// });
</script>
<style lang="less" scoped>
.home-contianer {
  padding: 0px;
  background: #eee;
  width: 100%;
  height: 200%;
  // max-width: 800px;
  //position: absolute;
  top: 0;
  right: 0;
  left: 0;
  margin: 0 auto;

  .h-top {
    display: flex;
    padding: 1px;
    .h-top-left {
      height: 100%;
      width: 30%;
      background: white;
    }
    height: 200px;
    border-radius: 1px;
    background: white;
    margin: 2px;
  }
  .h-top > div {
    border: 1px solid #e8e7e7;
    border-radius: 5px;
    margin: 6px;
  }
  .h-top-center {
    height: 100%;
    background: white;
    width: 25%;
    display: flex;
    flex-direction: column;
    flex: 1;
    .item1 .num {
      padding-top: 35px;
    }
    .item2 .num {
      padding-bottom: 10px;
    }

    .n-item {
      width: 100%;
      height: 100%;
      text-align: center;
      cursor: pointer;
      // display: flex;
      .item {
        border-right: 1px solid #e5e5e5;
        width: 33.3333333%;
        float: left;
        height: 50%;
        border-bottom: 1px solid #e5e5e5;
        padding: 41px 0;
        font-size: 13px;
      }
      .item:hover {
        background: #f9f9f9;
        cursor: pointer;
      }
      .item:last-child {
        border-right: 0;
      }
      .item3,
      .item6 {
        border-right: 0;
      }
      .num {
        word-break: break-all;
        color: #282727;
        font-size: 30px;
        transition: transform 0.8s;
      }
      .num:hover {
        color: #55ce80;
        transform: scale(1.2);
      }
      .text {
        font-size: 13px;
        color: #777;
      }
    }
  }
  .h-top-right {
    flex: 1;
    min-width: 300px;
    max-width: 400px;
    height: 100%;
    background: white;
  }
  .h3 {
    padding: 7px 15px;
    font-weight: 500;
    background: #fff;
    border-bottom: 1px dotted #d4d4d4;
  }
}
.task-table {
  table {
    width: 100%;
    .thead {
      font-weight: bold;
    }
    tr {
      cursor: pointer;
      td {
        border-bottom: 1px solid #f3f3f3;
        padding: 9px 8px;
        font-size: 12px;
      }
    }
    tr:hover {
      background: #eee;
    }
  }
}
.buttom {
  display: flex;
  padding: 0px;
  .b-top-left {
    height: 100%;
    width: 10%;
    background: white;
  }
  .a-top-left {
    height: 100%;
    width: 30%;
    background: white;
  }

  border-radius: 1px;
  background: white;
  padding-top: 1px;
  height: 260px;
  flex: 1;
}

.buttom > div {
  border: 1px solid #e8e7e7;
  border-radius: 5px;
  margin: 2px;
}
</style>
 
